'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    TextInput,
    TouchableWithoutFeedback,
    InteractionManager,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import Toast from '../Utils/toast';
import UserAPIService from '../Commom/UserAPIService';
import * as types from '../Commom/ActionConst';
export default class MyChangeUserNamePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputNickName: '',
        }
        this.closeKeybord = this.closeKeybord.bind(this);
    }

    closeKeybord() {
        TextInput.State.blurTextInput(TextInput.State.currentlyFocusedField());
    }

    componentDidMount() {
        const {UserReducer} = this.props;
        var user_name = UserReducer.user_name;
        if (user_name != null) {
            this.setState({
                inputNickName: user_name,
            })
        }
    }

    BackAction() {
        this.props.navigator.pop();
    }

    ClickAction(number) {
        const {UserReducer}=this.props;
        const {dispatch} = this.props;
        switch (number) {
            case 1:
                this.closeKeybord();
                if (this.state.inputNickName.length == 0) {
                    Toast.show('请输入您的昵称');
                    return;
                }
                UserAPIService.updateUserInformation(Global.Const.token, Global.Const.registeredId, this.state.inputNickName, null).then((ret)=> {
                    dispatch({type: types.kUserInformationReceived, user_name:this.state.inputNickName,result: ret});
                    setTimeout(()=> {
                        storage.save({
                            key: Global.Const.storageUser,
                            rawData: {
                                phone: UserReducer.phone,
                                user_name: this.state.inputNickName,
                                head_picture: UserReducer.head_picture
                            }
                        });
                    }, 200);
                }).catch((err)=> {
                    dispatch({type: types.kUserInformationReceived, result: null});
                });
                this.BackAction();
                break;
        }
    }

    render() {

        return (
            <TouchableWithoutFeedback onPress={()=>this.closeKeybord()}>
                <View style={styles.container}>
                    <View style={{width: Global.Const.size.width, height: 65, backgroundColor: 'white'}}>

                        <View style={{marginTop: 24, alignItems: 'center'}}>

                            <View style={{width: 21, height: 21, position: 'absolute', left: 12, top: 3}}>
                                <TouchableOpacity activeOpacity={0.5}
                                                  onPress={()=>this.BackAction()}>
                                    <Image style={{resizeMode: 'contain', width: 21, height: 21}}
                                           source={require('../../Image/icon_back.png')}></Image>
                                </TouchableOpacity>
                            </View>
                            <Text style={{fontSize: 19}}>修改昵称</Text>
                        </View>
                    </View>
                    <View
                        style={{
                            backgroundColor: 'white',
                            width: Global.Const.size.width,
                            height: 50,
                            borderBottomWidth: 1,
                            borderTopWidth: 4,
                            borderColor: Global.Const.transparent,
                            alignItems: 'center',
                            flexDirection: 'row'
                        }}>
                        <Text style={{marginLeft: 8, fontSize: 16, color: 'black'}}>昵称</Text>
                        <View style={{flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignItems: 'center'}}>
                            <TextInput style={{width: Global.Const.size.width, height: 50, textAlign: 'right'}}
                                       placeholder={'请输入昵称'}
                                       value={this.state.inputNickName}
                                       onChangeText={inputNickName => this.setState({inputNickName})}
                                       maxLength={18}
                                       keyboardType={'default'}
                                       underlineColorAndroid={'transparent'}
                            ></TextInput>
                        </View>
                    </View>
                    <TouchableOpacity activeOpacity={0.5}
                                      onPress={()=>this.ClickAction(1)}>
                        <View
                            style={{
                                marginTop: 105,
                                backgroundColor: '#24CD78',
                                borderRadius: 20,
                                marginLeft: 30,
                                marginRight: 30,
                                marginBottom: 10,
                                width: Global.Const.size.width - 60,
                                height: 40,
                                alignItems: 'center',
                                justifyContent: 'center'
                            }}>
                            <Text style={{color: 'white', fontSize: 18}}>完 成</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});